<template>
    <div class="zixun">
        <div class="top">
            <div class="left">
                <div class="icon"></div>
                <div>咨询</div>
            </div>
            <div class="right">
                <!-- <div class="icon"></div> -->
            </div>
        </div>
        <div class="list">
            <div class="item" v-for="item,index in list" :key="index">
                <div class="left">
                    <img :src="item.img" />
                </div>
                <div class="right">
                    <div class="z-title">{{item.title}}</div>
                    <div class="content">
                        <div class="text">{{ item.content }}</div>
                    </div>
                    <div class="bottom">
                        <div class="b-left">
                            <div class="icon"></div>
                            <div>{{ item.look }}</div>
                        </div>
                        <div class="b-right">{{ item.date }}</div>
                    </div>
                </div>
            </div>
        </div>
        </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    img: require('../../assets/otto/zx/img-1.png'),
                    title: '气体检测基础知识气体检测基础知识',
                    content: '根据可能引爆的最小火花能量，我国和欧洲及世界上大部分国家和地区将爆炸性气体分为四个危',
                    look: '453.31',
                    date: '2024-07-15'
                },
                {
                    img: require('../../assets/otto/zx/img-2.png'),
                    title: '气体检测原理',
                    content: '目前，我国的经济社会发展即将面对为数有限的大自然能源资源和急待需要保护的自然环境这一',
                    look: '453.31',
                    date: '2024-07-12'
                },
                {
                    img: require('../../assets/otto/zx/img-3.png'),
                    title: '气体产品质量检测中心',
                    content: '国家气体产品质量检验检测中心是我国气体行业最高的质量、计量监督检验部门。我中心的组织和技术依托单位是中国计量科学研究院。国家气体产品质检中心',
                    look: '453.31',
                    date: '2024-07-10'
                },
            ],
        }
    }
}
</script>

<style scoped>

/* 咨询 */
.zixun {
    width: 90%;
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 8px;
    padding: 16px 16px 0 16px;  
    margin-top: 10px;
    /* 底部距离 */
    margin-bottom: 70px;
}
.zixun .top {
    width: 100%;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}
.zixun .top .left {
    height: 100%;
    display: flex;
    align-items: center;
    color: #0052A3;
    font-size: 16px;
    font-weight: bold;
}
.zixun .top .left .icon {
    height: 20px;
    width: 20px;
    background: url('../../assets/otto/zx/icon-zixun.png') no-repeat 0px 0px;
    background-size: 100% 100%;
    margin-right: 4px;
}
.zixun .top .right .icon {
    height: 12px;
    width: 12px;
    background: url('../../assets/otto/zx/icon-right-dark.png') no-repeat 0px 0px;
    background-size: 100% 100%;
}

.zixun .list .item {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e2e2;
}

.zixun .list .item:last-child {
    border-bottom: none;
    padding-bottom: 0px;
}

.zixun .list .item .left{
    height: 80px;
    overflow: hidden;
    margin-right: 10px;
}
.zixun .list .item .left img {
    height: 80px;
    width: 110px;
    border-radius: 8px;
}

.zixun .list .item .right {
    height: 80px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.zixun .list .item .right .z-title{
    color: #002B55;
    font-size: 16px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient: vertical;
}
.zixun .list .item .right .content {
    flex: 1;
    margin-top: 4px;
}
.zixun .list .item .right .content .text {
    color: #00376D;
    font-size: 12px;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
}
.zixun .list .item .right .bottom {
    display: flex;
    align-items: center;
    height: 15px;
    color: #668BAF;
    font-size: 11px;
    justify-content: space-between;
}
.zixun .list .item .right .bottom .b-left {
    display: flex;
}
.zixun .list .item .right .bottom .b-left .icon {
    height: 10px;
    width: 10px;
    background: url('../../assets/otto/zx/icon-look.png') no-repeat 0px 0px;
    background-size: 100% 100%;
    margin-right: 2px;
}
</style>

